<template>
<view class="canvas_cont flex-c flex_a_c">
  <view class="draw">
		<canvas
			class="canvas"
			disable-scroll 
			type="2d" 
			id="myCanvas"
			@touchstart="handleTouchstart"
			@touchmove="handleTouchmove"
			:style="canvasSty">
		</canvas>
  </view>
  <view class="flex_center mt-106">
    <view class="reset" @click="clearContext">重新绘制</view>
    <view class="pay_btn ml-30">🔒解锁答案</view>
  </view>
</view>
</template>

<script>
	export default {
		data() {
			return {
				canvasWidth: 588,
				canvasHeight: 770,
				top: 0,
				canvas: null,
				title: '',
				img: null
			}
		},
		onLoad() {
		},
		computed: {
			canvasSty() {
				const {
					canvasWidth,
					canvasHeight
				} = this
				return {
					width: `${uni.upx2px(canvasWidth)}px`,
					height: `${uni.upx2px(canvasHeight)}px`
				}
			}
		},
		onReady() {
			this.initCanvas()
		},
		methods: {
			initCanvas() {
			const query = uni.createSelectorQuery().in(this)
				query.select('#myCanvas')
					.fields({ node: true, size: true })
					.exec(async (res) => {
						const canvas = res[0].node
						this.canvas = canvas
						this.ctx = canvas.getContext('2d')
						// 因此canvas的逻辑宽高等于物理宽高分别*dpr
						const dpr = wx.getSystemInfoSync().pixelRatio
						canvas.width = uni.upx2px(this.canvasWidth) * dpr
						canvas.height = uni.upx2px(this.canvasHeight)* dpr
						this.ctx.scale(dpr, dpr)
						// 渲染图片
						this.ctx.fillStyle = 'red';
						this.ctx.save();
						let { img } = await this.loadImg('http://content.daylucky.cn/admin/image/m64ff4by7wjss1xb37g6pt5t.png')
						this.img  = img
						// 椭圆区域
						this.ctx.beginPath()
						this.ctx.ellipse( uni.upx2px(this.canvasWidth) / 2,  uni.upx2px(this.canvasHeight) / 2, uni.upx2px(this.canvasWidth) / 2 - 4.5, uni.upx2px(this.canvasHeight) / 2 - 4.5, 0, 0, Math.PI * 2)
						this.ctx.drawImage(img, 0, 0,  uni.upx2px(this.canvasWidth), uni.upx2px(this.canvasHeight))
						// this.ctx.stroke() // 只绘制边框
						// 涂鸦不超过椭圆区域
						this.ctx.clip();
						
					})
			},
			// 预加载图片
			loadImg(url) {
				const {
					canvas
				} = this
				return new Promise((resolve, reject) => {
					const img = canvas.createImage()
					img.src = url
					img.onload = (e) => {
						resolve({
							code: 200,
							img,
						})
					}
					img.onerror = () => {
						reject(` img error`)
					}
				})
			},
			handleTouchstart(e) {
				this.lineBegin(e.changedTouches[0].x, e.changedTouches[0].y)
			},
			handleTouchmove(e) {
				this.lineTo(e.changedTouches[0].x, e.changedTouches[0].y)
			},
			lineBegin(x, y) {
				this.ctx.beginPath()
				// 新版Canvas 2D接口，直接修改属性即可
				this.ctx.lineCap = 'round'
				this.ctx.lineWidth = 5
				this.startX = x
				this.startY = y
				this.ctx.moveTo(this.startX, this.startY)
			},
			lineTo(x, y) {
				this.ctx.lineTo(x, y)
				this.ctx.stroke()
				this.ctx.moveTo(x, y)
			},
			async clearContext() {
				this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight)
				this.ctx.drawImage(this.img, 0, 0,uni.upx2px(this.canvasWidth), uni.upx2px(this.canvasHeight) )
			}
		}
	}
</script>	
<style lang="scss" scoped>
.canvas_cont {
	width: 100%;
}
.draw {
	width: 588rpx;
	height: 770rpx;
	// background: url(http://content.daylucky.cn/admin/image/m64ff4by7wjss1xb37g6pt5t.png) no-repeat left top/ 100% 100%;
	.canvas {
		width: 100%;
		height: 100%;
	}
}
.reset {
	width: 256rpx;
	height: 76rpx;
	font-family: DreamHanSerifCN-W4;
	border-radius: 38rpx;
	border: 2rpx solid #000000;
	font-size: 32rpx;
	line-height: 76rpx;
	color: #000000;
	text-align: center;
}
.pay_btn {
	width: 256rpx;
	height: 76rpx;
	background: #000000;
	border-radius: 38rpx;
	font-size: 32rpx;
	color: #FFFFFF;
	line-height: 76rpx;
	text-align: center;
	font-style: normal;
}

	
</style>